<template>
	<view class="content">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="myroom">情景模式</view>
			<view class="plus-icon-container ">
				<image class="plus-icon" src="../../static/images/room/plus.png" mode="aspectFit" @click="handlePlus">
				</image>
			</view>

		</view>
		<!-- 情景列表 -->
		<view class="mode-list">
			<view v-for="(mode, index) in ModeList" @click="goToModeDetail(mode)" @longpress="deleteMode(mode, index)"
				:key="index" class="mode-container" :class="{ 'actions-on':mode.modeStatus==='true'  }">
				<view class="mode-item">
					<image :src="'../../static/images/mode/' + mode.modePic+ '.png'" class="mode-pic">
					</image>
					<!-- <image :src="getModeIcon(mode.modePic)"  class="mode-pic" ></image> -->
					<view class="mode-right">
						<view class="mode-name">{{ mode.modeName }}</view>
						<!-- 开关按钮 -->
						<view class="swiper-list">
							<switch :checked="mode.modeStatus === 'true'" @change="toggleSwitch(mode,index)"
								class="check" />
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listMode,
		getMode,
		addMode,
		updateMode,
		delMode,
	} from '@/api/mode/mode.js';
	 import { change } from '@/api/device/device.js';
	export default {
		components: {

		},
		data() {
			return {
				ModeList: [],
			};
		},
		methods: {
			getModeList() {
				getMode().then(res => {
					console.log(res.rows);
					this.ModeList = res.rows;
					console.log(this.ModeList);
				});
			},
			prev() {
				uni.switchTab({
					url: "/pages/mine/index"
				})
			},
			handlePlus() {
				uni.navigateTo({
					url: "/pages/mode/addmode"
				})
			},
			toggleSwitch(mode, index) {
				// console.log(device,"11111111111111",index,"22222",device.status);
				event.stopPropagation(); // 阻止事件冒泡
				if (mode.modeStatus === "true") {
					mode.modeStatus = "false";
				} else {
					mode.modeStatus = "true";
				}
				// 发射自定义事件并传递更新的设备对象
				this.update(mode);
				// console.log(mode);
				if (mode.id === 1) {
					console.log("mode.id：",mode.id);
					this.changeModeStatus(mode.modeStatus);
				}
			},
			update(mode) {
				updateMode(mode).then(() => {}).catch(error => {
					console.error('失败:', error.response ? error.response.data : error);
					uni.showToast({
						title: '失败，请重试',
						icon: 'none'
					});
				});
			},
			getModeIcon(modePic) {
				// 返回房间图标的路径
				switch (modePic) {
					case 'o1':
						return '../../static/images/mode/o1.png';
					case 'o2':
						return '../../static/images/mode/o2.png';
					case 'o3':
						return '../../static/images/mode/o3.png';
					case 'o4':
						return '../../static/images/mode/o4.png';
					default:
						return '';
				}
			},
			goToModeDetail(mode) {
				const modeParam = encodeURIComponent(JSON.stringify(mode));
				uni.navigateTo({
					url: `/pages/mode/index?mode=${modeParam}&modeId=${mode.id}` // 传递mode.id
				});
			},
			changeModeStatus(status) {
			    console.log("change:status", status);
			    const numericStatus = status === "true" ? 1 : 0;
			    console.log("change222:status", numericStatus);
			
			    const payload = numericStatus
			        
			   
			
			    // 发送请求
			    change(payload).then((res) => {
			        console.log('服务器响应:', res);
			        if (res.status === 200) {
			            uni.showToast({
			                title: '硬件更新成功',
			                icon: 'success'
			            });
			        } else {
			            // console.error('硬件更新失败:', res);
			            // uni.showToast({
			            //     title: '硬件更新失败，请重试',
			            //     icon: 'none'
			            // });
			        }
			    }).catch((error) => {
			        console.error('硬件更新失败:', error);
			        uni.showToast({
			            title: '硬件更新失败，请重试',
			            icon: 'none'
			        });
			    });
			},

			deleteMode(mode, index) {
				if (mode.id === 1) {
								uni.showToast({
									title: '此情景模式不能删除',
									icon: 'none'
								});
								return;
							}
				uni.showModal({
					title: '删除情景',
					content: '确定要删除这个情景模式吗？',
					success: (res) => {
						if (res.confirm) {
							delMode(mode.id).then(() => {
								this.ModeList.splice(index, 1);
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
							}).catch(error => {
								console.error('删除失败:', error.response ? error.response.data : error);
								uni.showToast({
									title: '删除失败，请重试',
									icon: 'none'
								});
							});
						}
					}
				});
			}
		},
		onShow() {
			this.getModeList();
		}
	}
</script>

<style>
	page {
		background-color: #f9f9f9;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 1.5px solid #f0f0f0;
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;

		padding: 3px;
	}

	.myroom {
		flex: 7;
		font-size: 18px;
		color: #4e6490;
		font-weight: bold;
		text-align: center;
	}

	.plus-icon-container {
		position: relative;
	}

	.plus-icon {
		width: 35px;
		height: 35px;
		object-fit: contain;
		margin-right: 40rpx;
	}

	.mode-list {
		padding-top: 90px;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.mode-container {
		border: 1px solid #b9b9b9;
		border-radius: 10px;
		/* 圆角边框 */
		margin-bottom: 10px;
		height: 225rpx;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
		margin-bottom: 20px;
		/* 调整每个列表之间的间距 */
		background-color: #f8f8f8;
	}

	.actions-on {
		background: linear-gradient(to left, #ffffff, #738aad);
	}

	.mode-item {
		padding: 16px;
		display: flex;
		align-items: center;
		/* 垂直方向居中 */
		/* justify-content: space-between; /* 子元素在容器两端 */
	}

	.mode-right {
		/* margin-left: 162px; */
	}

	.mode-name {
		font-size: 18px;
		padding-bottom: 9px;
		margin-left: 162px;
		width: 84px;
	}

	.mode-pic {
		height: 105px;
		width: 105px;
		margin-top: -10px;
	}

	.swiper-list {
		margin-left: 182px;

	}

	.custom-switch {
		width: 50px;
		height: 25px;
		background-color: #808080;
		/* 默认灰色 */
		border-radius: 25px;
		position: relative;
		cursor: pointer;
		transition: background-color 0.3s;

	}

	.switch-on {
		background-color: #00b900;
		/* 开启时绿色 */
	}

	.switch-circle {
		width: 23px;
		height: 23px;
		background-color: white;
		border-radius: 50%;
		position: absolute;
		top: 1px;
		left: 1px;
		transition: left 0.3s;

	}

	.circle-on {
		left: 26px;
		/* 圆点移动到右边 */
	}
</style>